<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>slotScope</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>

<script type="text/javascript">
	Vue.config.devtools = false;
	Vue.config.productionTip = false;

	Vue.component('special-list', {
	  props: {
	    items: Array,
	  },
	  render (h) {
	  	return h('div', [
        h('div', this.items.map((item) => {
		      return this.$scopedSlots.default(item);
		    })),
		    h('special-list-child', {
		    	props: {
		        name: 'mark'
		      },
		      scopedSlots: {
				    nslot: props => createElement('span', 'props.text')
				  },
		    }, 'xxx')
	  	]);
	  },
	});

	Vue.component('special-list-child', {
	  props: {
	    name: String,
	  },
	  slot: 'nslot',
	  render (h) {
	  	return h('div', `Hello ${ this.name }`);
	  },
	});

	new Vue({
	  el: '#app',
	  data () {
	    return {
	      pets: [
	        { name: 'alma', type: 'cat' },
	        { name: 'ring', type: 'cat' },
	        { name: 'winston', type: 'dog' },
	      ],
	    };
	  },
	  render (h) {
	    return h('special-list', {
	      props: {
	        items: this.pets,
	      },
	      scopedSlots: {
	        default (pet) {
	          return h('div', `${ pet.name } is a ${ pet.type }`);
	        }
	      },
	    });
	  },
	});
</script>
</body>
</html>